<template>
    <div class="search">
      <div class="search-box">
	        <img src="" alt="">
	        <input type="text" placeholder="搜索歌曲、歌手、专辑" v-model="keywords" v-throttle="search">
	      
	        <span class="close" v-show="keywords !==''" @click="clearKeywords">
		        <img src="" alt="">
	        </span>
        </div>
	    <div class="search-suggest" v-show="keywords !== ''">
		    
		    <ScrollView>
			    <ul>
				    <li v-for="value in serachList" :key="value.id" @click="selectMusic(value.id)">
					    <img src="" alt="">
					    <p>{{value.name}}</p>
				    </li>
			    </ul>
		    </ScrollView>
		    
		    
	    </div>
	    <div class="search-hot">
		    <h3>热门搜索</h3>
		    <ul>
			    <li v-for="(value,index) in hotList" @click="selectHotWrods(value.first)" :key="value.first">{{index+1}} {{value.first}}</li>
		    </ul>
	    </div>
	    <ul class="search-history">
		    <li v-for="value in searchHistory" :key="value" @click="selectHistory(value)">
			    <div class="history-left">
				    <img src="" alt="">
				    <p>{{value}}</p>
			    </div>
			    <div class="history-right">
				    <img @click.stop="delHistory(value)" src="" alt="">
			    </div>
		    </li>
	    </ul>
    </div>
</template>

<script>
	import ScrollView from "../components/ScrollView";
  import {getSearchList,getHotList} from "../api/index";
  import {mapActions} from 'vuex';
  import {getLocalStorage, setLocalStorage} from "../tools/tools";
  import MetaInfo from "../../vue-meta-info";
  
  export default {
    name: "Search",
	  metaInfo:MetaInfo.search,
    data() {
      return {
        keywords: "",
        serachList: [],
        hotList: [],
        searchHistory: []
      };
    },
    components: {
      ScrollView
      
    },
    methods: {
      ...mapActions([
        "setFullScreen",
        "setSongDetail",
        "setIsPlaying"
      ]),
      search() {
        // console.log('发送请求');
        getSearchList({'keywords': this.keywords}).then(data => {
          this.serachList = data.result.songs;
          console.log(data);
        }).catch(err => {
          console.log(err);
        });
      },
      selectMusic(id) {
        this.setFullScreen(true);
        this.setIsPlaying(true);
        this.setSongDetail([id]);
        //判断是否保存了
        if (this.searchHistory.includes(this.keywords)) {
          return;
        }
        this.searchHistory.push(this.keywords);
        setLocalStorage('searchHistory', this.searchHistory);
        this.keywords = '';
      },
      selectHotWrods(name) {
        this.keywords = name;
        this.search();
      },
      delHistory(name) {
        this.searchHistory = this.searchHistory.filter(function (item) {
          //把传进来的值过滤掉，其它返回去
          return item !== name;
        });
        setLocalStorage('searchHistory', this.searchHistory);
      },
      selectHistory(name) {
        this.keywords = name;
        this.search();
      },
      clearKeywords() {
        this.keywords = '';
      }
    },
    created() {
      getHotList().then(data => {
        console.log(data);
        this.hotList = data.result.hots
      }).catch(error => {
        console.log(err);
      });
      
      //判断缓存是否已经存在
      if (getLocalStorage('searchHistory') === undefined || getLocalStorage('searchHistory') === null) {
        return;
      }
      this.searchHistory = getLocalStorage('searchHistory');
    },
    //自定义指令
    directives: {
      throttle: {
        // 节流
        inserted: function (el,obj) {
          let timerId = null
          let flag = true
          el.addEventListener('input', function () {
            if (!flag) return
            flag = false
            timerId && clearTimeout(timerId)
            timerId = setTimeout(function () {
              flag = true
              obj.value()
            }, 1000)
          })
        }
      }
    }
  };
</script>


	<style scoped lang="scss">
	@import "../assets/css/variable";
	@import "../assets/css/mixin";
	.search{
		position: fixed;
		left: 0;
		right: 0;
		top: 184px;
		bottom: 0;
		@include bg_sub_color();
		.search-box{
			display: flex;
			align-items: center;
			margin: 40px 20px;
			background: #ebecec;
			border-radius: 30px;
			border-bottom: 1px solid #ccc;
			/*height: 60px;*/
			.close {
				position: fixed;
				right: 40px;
				img{
					width:30px;
					height: 30px;
				}
			}
			img{
				width: 40px;
				height: 40px;
				margin-left: 20px;
			}
			input{
				border: none;
				outline: none;
				background: transparent;
				@include font_size($font_medium);
				height: 60px;
				margin-left: 20px;
			}
		}
		.search-suggest{
			position: fixed;
			left: 0;
			right: 0;
			top: 300px;
			bottom: 0;
			overflow: hidden;
			@include bg_sub_color();
			li{
				display: flex;
				align-items: center;
				padding: 20px 40px;
				box-sizing: border-box;
				border-bottom: 1px solid #ccc;
				img{
					width: 40px;
					height: 40px;
				}
				p{
					margin-left: 20px;
					@include font_color();
					@include font_size($font_medium);
				}
			}
		}
		.search-hot{
			h3{
				@include font_color();
				@include font_size($font_medium);
				padding: 10px 20px;
			}
			ul{
				display: flex;
				flex-wrap: wrap;
				li{
					height: 60px;
					line-height: 60px;
					border: 1px solid #000;
					border-radius: 30px;
					padding: 0 20px;
					@include font_color();
					@include font_size($font_medium_s);
					margin: 10px 20px;
				}
			}
		}
		.search-history{
			margin-top: 20px;
			li{
				padding: 20px 20px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #ccc;
				.history-left{
					display: flex;
					align-items: center;
					img{
						width: 40px;
						height: 40px;
					}
					p{
						margin-left: 20px;
						@include font_color();
						@include font_size($font_medium_s);
					}
				}
				.history-right{
					img{
						width: 30px;
						height: 30px;
					}
				}
			}
		}
	}
	</style>
